<template>
	<scroll-view :scroll-into-view="topItem" scroll-with-animation class="scroll-cont" scroll-y="true" @scroll="handleScroll">
		<view>
			<view id="top"></view>
			<!-- 顶部导航栏 -->
			<nav-custom></nav-custom>
			<!-- 轮播图 -->
			<swiper class="banner" :indicator-dots="true" :autoplay="true" indicator-active-color="#ffe32a">
				<swiper-item v-for="(item, index) in banner" :key="item.objectId" @click="handleBanner(item.link)">
					<view class="swiper-item"><image :src="item.img"></image></view>
				</swiper-item>
			</swiper>
			<!-- 商品导航1 -->
			<home-title title="本季推荐" enTitle="Seasonal Recommend" enTit="Seasonal"></home-title>
			<!-- X轴滚动图 -->
			<scroll-view scroll-x="true">
				<view class="scroll-inner">
					<image src="../../static/images/recommend3.jpg" mode="heightFix"></image>
					<image src="../../static/images/recommend2.jpg" mode="heightFix"></image>
					<image src="../../static/images/recommend1.jpeg" mode="heightFix"></image>
				</view>
			</scroll-view>
			<!-- 商品导航2 -->
			<home-title title="法式经典" enTitle="French Classics" enTit="French"></home-title>
			<image class="classify" src="../../static/images/Frence.jpg" mode="heightFix"></image>
			<!-- 商品列表清单 -->
			<view class="flex flex-wrap padding-sm justify-between"><good-item v-for="(item, index) in 4"></good-item></view>
			<!-- 返回顶部按钮 -->
			<view class="back-top" v-show="isShow" @click="handleBackTop"><text class="iconfont icon icon-tubiao_fanhuidingbu"></text></view>
		</view>
		<tab-custom></tab-custom>
	</scroll-view>
	
</template>

<script>
import { $http } from '../../utils/request.js';
export default {
	data() {
		return {
			isShow: false,
			topItem: '', //返回顶部的标记点
			banner: []
		};
	},
	methods: {
		handleScroll(ev) {
			let { scrollTop } = ev.detail;
			this.isShow = scrollTop > 500;
			this.topItem = '';
		},
		handleBackTop() {
			this.topItem = 'top';
		},
		handleBanner(link) {
			console.log(1111);
			uni.navigateTo({
				url: `./banner-id?link=${link}`
			});
		}
	},
	onLoad() {
		this.$get('/1.1/classes/banner').then(res => {
			console.log(res);
			this.banner = res.results;
		});
	}
};
</script>

<style lang="scss">
.banner {
	height: 1000upx;
	swiper-item {
		height: 1000upx;
	}
	image {
		width: 100%;
		height: 1000upx;
	}
}

.scroll-inner {
	white-space: nowrap;
	image {
		height: 290upx;
	}
}

.classify {
	height: 380upx;
	width: 100%;
}

.back-top {
	height: 100upx;
	width: 100upx;
	background-color: #fff;
	border-radius: 50%;
	box-shadow: 0 0 30upx 4upx rgba(0, 0, 0, 0.4);
	position: fixed;
	bottom: 40upx;
	right: 20upx;
	text-align: center;
	line-height: 100upx;
}

.scroll-cont {
	height: 100vh;
}
</style>
